<template>
  <section>
 <div class="login-box">
   <lay-form :model="loginForm" ref="loginFormRef" required>
                   <!-- 障眼元素 -->  
<input type="text" class="autofill-trick" name="fakeUsername" autocomplete="username">  
<input type="password" class="autofill-trick" name="fakePassword" autocomplete="current-password">  
         <h2>Webos办公系统</h2>
         <div class="input-box">
             <span class="icon">
               <lay-icon type="layui-icon-username" color="#fff"></lay-icon>
                 <!-- <ion-icon name="mail" role="img" class="md hydrated" aria-label="mail"></ion-icon> -->
             </span>
             <input class="input" type="text" v-model="loginForm.username"  autocomplete="off"/>
             <label>用户名：</label>
         </div>

         <div class="input-box">
             <span class="icon">
               <lay-icon type="layui-icon-password" color="#fff"></lay-icon>
                 <!-- <ion-icon name="lock-closed" role="img" class="md hydrated" aria-label="lock closed"></ion-icon> -->
             </span>
             <input class="input" type="password" v-model="loginForm.password"  autocomplete="off"/>
             <label>密码：</label>
         </div>


         <button  @click="loginSubmit">登录</button>
       </lay-form>
 </div>
 </section>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../store/user'
import { layer } from '@layui/layer-vue'
import CryptoJS from "crypto-js";
// import JSEncrypt from "jsencrypt";
import AES from "crypto-js/aes";
import moment from 'moment';

import webosutils from 'webosutils';

import config from '../../config';
export default defineComponent({
setup() {
 const router = useRouter()
 const userStore = useUserStore()
 const method = ref('1')
 const verificationImgUrl = ref('')
 const loging = ref(false);
 const loginQrcodeText = ref('')
 const remember = ref(false);
 const codeimg = ref("");
 const loginFormRef = ref();
 const logincode = ref("");
 const eventSource = ref<any>({});
 const loginForm = reactive({
   username: "", password: "", code: "", remember
 })

 onMounted(() => {

 });
 const change=(th:any)=>{
   console.log(th);
 }
 const toChangeMethod = (e: any) => {
   if (e == "2") {
     //toRefreshQrcode();
   } else {
     if (eventSource.value) {
       eventSource.value.close();
     }

   }
 }
 if (new Date().getTime() < userStore.expires_in && userStore.token != "" && userStore.token != null&& userStore. islogin==true) {
   layer.msg("你已经登录啦，正在为您调整首页！", { icon: 1 });
   router.push('/');
 }
 const getnewcode = function () {
   console.log(Date.parse(new Date().toString()));
   codeimg.value = "/v1/api/login/getCode?v=" + Date.parse(new Date().toString())
 }
 const loginSubmit = async () => {
   loging.value = true;
   loginFormRef.value.validate(async (isValidate: boolean, model: typeof loginForm, errors: object) => {
     if (isValidate) {
       console.log(model);
       if(model.username==''){
         return layer.msg("请输入用户名", { icon: 2 });
       }
       if(model.password==''){
         return layer.msg("请输入密码", { icon: 2 });
       }
     
       let logindata = new Object() as any;
       logindata.user = Encrypt(model.username);
       logindata.pw = Encrypt(model.password);
       logindata.code = Encrypt(model.code);
      // String mobile=getPara("mobile");
      logindata.mobile='mobile';
       //let layerid = layer.msg("正在登录", { icon: 16, time: 30000, shade: true });
       await webosutils.http.post("/v1/api/login/Login", logindata).then((resp: any) => {

         if (resp.success) {
           if(resp.default){
             userStore. islogin=false;
             userStore.token = resp.access_token;
             userStore.expires_in = resp.expires_in;
             router.push('/users/changepwd');
           }else{
             loging.value = false;
            layer.msg(resp.msg, { icon: 1 }, async () => {
             userStore. islogin=true;
             userStore.userInfo.name = resp.name;
             userStore.token = resp.access_token;
             userStore.expires_in = resp.expires_in;
             userStore.userInfo.userid = resp.userid;
             userStore.userInfo.orname = resp.orname;
             userStore.userInfo.orgid = resp.orgid;
             userStore.userInfo.account = resp.account;
             userStore.userInfo.picture = resp.picture;
             userStore.userInfo.isLogin = resp.isLogin;
             userStore.userInfo.community = resp.community;
             userStore.userInfo.role = resp.role;
             userStore.userInfo.phone=resp.phone;
             await userStore.loadMenus();
             await userStore.loadPermissions();
             //判断是否过期

             router.push('/');
           })
           }
     
         } else {
           layer.msg(resp.msg, { icon: 2 });
           getnewcode();
           loging.value = false;
         }
       }).catch(e => {
         layer.msg("网络错误请检查网络", { icon: 2 });

         loging.value = false;
       });
       //  layer.close(layerid);

     } else {
       loging.value = false;
     }

   });
   // login(loginForm).then(({ data, code, msg }) => {
   //   setTimeout(() => {
   //     loging.value = false;
   //     if (code == 200) {
   //       layer.msg(msg, { icon: 1 }, async () => {
   //         userStore.token = data.token
   //         await userStore.loadMenus()
   //         await userStore.loadPermissions()
   //         router.push('/')
   //       })
   //     } else {
   //       layer.msg(msg, { icon: 2 })
   //     }
   //   }, 1000)
   // })
 }
 const Encrypt = function (word: any) {
   let key = "webos" + moment(new Date()).format("YYYYMMDD") + "591"; //十六位十六进制数作为密钥
   var keys = CryptoJS.enc.Utf8.parse(key);
   var srcs = CryptoJS.enc.Utf8.parse(word);
   var encrypted = CryptoJS.AES.encrypt(srcs, keys, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
   return encrypted.toString();
 }


 getnewcode();
 return {

   loginSubmit,
   loginForm,
   remember,
   method,
   loging,
   codeimg,
   getnewcode,
   loginQrcodeText,
   toChangeMethod,

   loginFormRef
 }
}
})
</script>

<style scoped>
 /* 隐藏障眼元素 */  
 .autofill-trick {  
     display: none;  
 }  

section {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100vh;
 background: url('/images/wallpaper5_a5bd6fc.jpg') no-repeat;
 background-size: cover;
 background-position: center;
 animation: animateBg 5s linear infinite;
}

@keyframes animateBg {
 100% {
     filter: hue-rotate(360deg)
 }
}

.login-box {
 position: relative;
 width: 600px;
 height: 450px;
 background: transparent;
 border: 2px solid rgba(119, 92, 92, 0.5);
 border-radius: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 backdrop-filter: blur(15px);

}


h2 {
 font-size: 2.5rem;
 color: #fff;
 text-align: center;
}

.input-box {
 position: relative;
 width: 310px;
 margin: 30px 0;
 border-bottom: 2px solid #fff;
}

.input-box label {
 position: absolute;
 top: 50%;
 left: 8px;
 transform: translateY(-50%);
 font-size: 1rem;
 color: #fff;
 pointer-events: none;
 transition: .5s;
}

.input-box .input:focus~label,
.input-box input:valid~label {
 top: -8px;
}
.input-box .input:valid{  
width: 100%;
 height: 50px;
 background: transparent;
 border: none;
 outline: none;
 font-size: 1rem;
 color: #fff;
 padding: 0 35px 0 5px;
}
.input-box .input {
 width: 100%;
 height: 50px;
 background: transparent;
 border: none;
 outline: none;
 font-size: 1rem;
 color: #fff !important;
 padding: 0 35px 0 5px;
}

.input-box .icon {
 position: absolute;
 right: 8px;
 color: #fff;
 font-size: 1.2rem;
 line-height: 57px;
}

.remember-forgot {
 margin: -15px 0 15px;
 font-size: .9em;
 color: #fff;
 display: flex;
 justify-content: space-between;
}

.remember-forgot label .input {
 margin-right: 3px ;
}

.remember-forgot a {
 color: #fff;
 text-decoration: none;}

 .remember-forgot a:hover {
    text-decoration: underline;
 }

 button {
     width: 100%;
     height: 40px;
     background: #fff;
     border: none;
     outline: none;
     border-radius: 40px;
     cursor: pointer;
     font-size: 1rem;
     color: #000;
     font-weight: 500;
 }    


 @media (max-width: 360px) {
     .login-box {
         width: 100%;
         height: 100vh;
         border: none;
         border-radius: 0;
     }

     .input-box {
         width: 290px;
     }
 }
 .input-box .input:-internal-autofill-selected{
   appearance: menulist-button;
 background-image: none !important;
 background-color: transparent !important;
 color: fieldtext !important;
 }
 .input-box .input:-internal-autofill-previewed {
   appearance: menulist-button;
 background-image: none !important;
 background-color: transparent !important;
 color: fieldtext !important;
 }
 .input-box .input[type="password" i] {
 -webkit-text-security: disc !important;
}
</style>
